<template>
    <div ref="container">
        <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading"
            :getContainer="() => $refs.container" :maskStyle="{ top: '93px', left: '154px' }" :mask="isDesktop()"
            :maskClosable="false" @ok="handleOk" @cancel="handleCancel" cancelText="关闭" style="top: 5%; height: 85%">
            <a-spin :spinning="confirmLoading">
                <a-form-model :model="form" ref="form" :rules="rules">
                    <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="配送员"
                        prop="deliveryFeeStatus">
                        <a-select placeholder="请选择配送员" v-model="form.deliveryFeeStatus"
                            :dropdownMatchSelectWidth="false">
                            <a-select-option v-for="(item, index) in deliveryFeeStatus" :key="index"
                                :value="item.value">
                                {{ item.label }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script>
import pick from "lodash.pick";
import { mixinDevice } from "@/utils/mixin";

export default {
    mixins: [mixinDevice],
    data() {
        return {
            title: "审核",
            deliveryFeeStatus: [
                {
                    label: "未审核",
                    value: "1",
                    color: "#87d068",
                },
                {
                    label: "已审核",
                    value: "2",
                    color: "#2db7f5",
                },
                {
                    label: "不通过",
                    value: "3",
                    color: "#ff0000",
                },
            ],
            visible: false,
            confirmLoading: false,
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 20 },
            },
            model: {},
            form: {
                deliveryFeeStatus: "",
            },
            rules: {
                deliveryFeeStatus: [
                    {
                        required: true,
                        message: "请选择审核状态",
                        trigger: "change",
                    },
                ],
            },
        };
    },

    methods: {
        open(record) {
            this.visible = true;
            this.model = Object.assign({}, record);
            this.$nextTick(() => {
                this.$refs.form.resetFields();
                this.form = pick(this.model, "id", "deliveryFeeStatus");
            });
        },

        handleOk() {
            this.$refs.form.validate((isValid, values) => {
                if (!isValid) return;
                this.$emit("ok", this.form);
                this.handleCancel();
            });
        },

        handleCancel() {
            this.visible = false;
        },
    },
};
</script>